
<template>
    <div>
        <div class="occupy">
            <!-- 占位盒子，导航栏fixed脱标盖住商品列表 -->
        </div>
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="balance-list-o" to="/recommend" replace>种草文章</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/cart" replace :badge="store.count ? store.count : ''">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o" to="/user" replace>我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
    
<script setup>
import { ref, watch } from 'vue';
import { useCartStore } from '@/stores/cart.js'
import { useRoute } from 'vue-router';
const active = ref(0)
const store = useCartStore()
const route = useRoute()
watch(route, (val) => {
    switch (val.name) {
        case 'home':
            active.value = 0
            break;
        case 'recommend':
            active.value = 1
            break;
        case 'cart':
            active.value = 2
            break;
        case 'user':
            active.value = 3
            break;
    }
},{immediate:true})
</script>
    
<style  scoped>
.occupy {
    height: 2.8rem;
}
</style>